<template>
  <Row :gutter="20">
    <i-col :md="24" :lg="8" style="margin-bottom: 20px;">
      <Card shadow style="height: 400px;padding: 0px;">
        <p slot="title">
          <Icon type="ios-film-outline"></Icon>
          基本折线图
        </p>
        <line-chart1 ref="lineChart1" :lineChart1Data="lineChart1Data"></line-chart1>
      </Card>
    </i-col>
    <i-col :md="24" :lg="8" style="margin-bottom: 20px;">
      <Card shadow style="height: 400px;padding: 0px;">
        <p slot="title">
          <Icon type="ios-film-outline"></Icon>
          双折线图
        </p>
        <line-chart2 ref="lineChart2" :lineChart2Data="lineChart2Data"></line-chart2>
      </Card>
    </i-col>
    <i-col :md="24" :lg="8" style="margin-bottom: 20px;">
      <Card shadow style="height: 400px;padding: 0px;">
        <p slot="title">
          <Icon type="ios-film-outline"></Icon>
          折线统计1图
        </p>
        <line-chart3 ref="lineChart3"></line-chart3>
      </Card>
    </i-col>
    <i-col :md="24" :lg="8" style="margin-bottom: 20px;">
      <Card shadow style="height: 400px;padding: 0px;">
        <p slot="title">
          <Icon type="ios-film-outline"></Icon>
          折线统计图
        </p>
        <line-chart4 ref="lineChart4" :charHeight="charHeight" charId="charId5"></line-chart4>
      </Card>
    </i-col>
    <i-col :md="24" :lg="8" style="margin-bottom: 20px;">
      <Card shadow style="height: 400px;padding: 0px;">
        <p slot="title">
          <Icon type="ios-film-outline"></Icon>
          折线统计图
        </p>
        <line-chart5 ref="lineChart5" :charHeight="charHeight" charId="charId6"></line-chart5>
      </Card>
    </i-col>
    <i-col :md="24" :lg="8" style="margin-bottom: 20px;">
      <Card shadow style="height: 400px;padding: 0px;">
        <p slot="title">
          <Icon type="ios-film-outline"></Icon>
          折线统计图1
        </p>
        <line-chart6 ref="lineChart6" :charHeight="charHeight" charId="charId3"></line-chart6>
      </Card>
    </i-col>
  </Row>
</template>
<script>
import lineChart1 from './lineChart1.vue'
import lineChart2 from './lineChart2.vue'
import lineChart3 from './lineChart3.vue'
import lineChart4 from './lineChart4.vue'
import lineChart5 from './lineChart5.vue'
import lineChart6 from './lineChart6.vue'

export default {
  components: {
    'line-chart1': lineChart1,
    'line-chart2': lineChart2,
    'line-chart3': lineChart3,
    'line-chart4': lineChart4,
    'line-chart5': lineChart5,
    'line-chart6': lineChart6,
  },
  data() {
    return {
      lineChart1Data:{
        height:400-51-16-16,
        id:"charId1",
        data:[{name: '1991',value: 3}, {name: '1992',value: 4}, {name: '1993',value: 3.5}, {name: '1994',value: 5}, {name: '1995',value: 4.9}, {name: '1996',value: 6}, {name: '1997',value: 7}, {name: '1998',value: 9}, {name: '1999',value: 13}],
      },
      lineChart2Data:{
        height:400-51-16-16,
        id:"charId2",
        data:{
          xAxis:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月",],
          value:[
            {name:"伦敦",dataList:[
              3.9,4.2,5.7,8.5,11.9,15.2,17,16.6,14.2,10.3,6.6,4.8
            ]},
            {name:"巴黎",dataList:[
              7,6.9,9.5,14.5,18.4,21.5,25.2,26.5,23.3,18.3,13.9,9.6
            ]},
            {name:"巴黎1",dataList:[
              7,6.9,9.5,14.5,18.4,21.5,25.2,26.5,23.3,18.3,13.9,9.6
            ]},
          ]
        }
      },
      charHeight:400-51-16-16
    }
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态

  },
  methods: {//执行的方法

  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
